---
title: Top-level src directory
description: Learn how to use a top-level src directory in your Expo Router project.
hideTOC: true
---

import { FileTree } from '~/ui/components/FileTree';
import { Terminal } from '~/ui/components/Snippet';

As your project grows, it can be helpful to move all the directories containing application code into a single **src** directory. Expo Router supports this out of the box.

<FileTree
  files={['src/app/_layout.tsx', 'src/app/index.tsx', 'src/components/button.tsx', 'package.json']}
/>

Simply move your **app** directory to **src/app** and restart the development server.

{/* prettier-ignore */}
<Terminal cmd={[
  '$ npx expo start',
  '',
  '# Or export for production',
  '$ npx expo export'
]} />

**Notes**:

- The config files (**app.config.ts**, **app.json**, **package.json**, **metro.config.js**, **tsconfig.json**) should remain in the root directory.
- The **src/app** directory takes higher precedence than the root **app** directory. Only the **src/app** directory will be used if you have both.
- The **public** directory should remain in the root directory.
- Static rendering will automatically use the **src/app** directory if it exists.
- You may consider updating any [type aliases](/guides/typescript#path-aliases) to point to the **src** directory instead of the root directory.

## Custom directory

> **warning** Changing the default root directory is highly discouraged. We will not accept bug reports regarding projects with custom root directories.

You can dangerously customize the root directory using the Expo Router Config Plugin. The following will change the root directory to **src/routes**, relative to the project root.

```json app.json
{
  "plugins": [
    [
      "expo-router",
      {
        "root": "./src/routes"
      }
    ]
  ]
}
```

This may lead to unexpected behavior. Many tools assume the root directory to be either **app** or **src/app**. Only tools in the exact version of Expo CLI will respect the config plugin.
